<template>
    <div class="reportCanter">
        <div class="reportHeader">
            <div class="reportL">
                <h1 class="title">{{ title }}</h1>
            </div>
            <div class="reportR">
                <slot name="setting"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: "这里是标题"
        }
    },
    name: 'ReportHeader',
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.reportCanter{
    height: 90px;
    width: 100%;
}
.reportHeader{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    height: 90px;
    background: var(--head-bg-color);
    display: flex;
    box-sizing: border-box;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    .reportL{
        display: inline-flex;
        align-items: center;
        .title{
            font-size: 32px;
            color: var(--white);
            font-weight: 600;
            letter-spacing: 1px;
        }
    }
    .reportR{
        display: inline-flex;
        align-items: center;
        color: var(--white);
        font-size: 26px;
        .tip{
            margin-right: 4px;
        }
    }
}
</style>